fixes: minor css modifications, added basic information about the last read manga chapter (don't expect much out of it)

5 files changed, 37 insertions, 15 deletions

diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
index c368f75..2db6d77 100644
--- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -19,7 +19,7 @@ function CR(chapter, volume) {
 		<div className={styles.CurrentReadingContainer}>
 			{chapter && volume && (
 				<p>
-					Vol {volume} Chapter {chapter}
+					Reading: Vol {volume} Chapter {chapter}
 				</p>
 			)}
 		</div>
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
index 7eb1e7e..e0badc9 100644
--- a/src/app/manga/[title]/[id]/[read]/download.jsx
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -8,7 +8,7 @@ export default function DownloadManga({ chapterId: id }) {
 				href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
 				style={{ textDecoration: "none" }}
 			>
-				<button title="This feature is in very early stages. Use it on your own risk">
+				<button title="This functionality currently exhibits stability with lower-quality PDFs; however, users may encounter challenges when attempting to download higher-quality PDFs.">
 					Download - Beta
 				</button>
 			</Link>
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index e584ee2..eaaa94c 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -27,6 +27,7 @@ export default async function Read({ params }) {
 			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
+				<p>Total pages: {images.length}</p>
 				{images &&
 					images.map((item, index) => (
 						<div className={styles.Image} key={index}>
@@ -43,6 +44,7 @@ export default async function Read({ params }) {
 						</div>
 					))}
 			</div>
+			<CurrentReading />
 		</div>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index d9d3d06..a36658a 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -16,7 +16,7 @@
 .TitleContainer p {
 	font-family: "Quicksand";
 	font-size: 40px;
-	font-weight: 900;
+	font-weight: 1000;
 }
 
 .TitleContainer img {
@@ -65,7 +65,7 @@
 }
 
 .Character::-webkit-scrollbar-thumb {
-	background-color: #B799FF;
+	background-color: #31363F;
 	border-radius: 5px;
 }
 
@@ -84,11 +84,25 @@
 }
 
 /* Chapters Buttons */
-.ChapterContainer {
-	width: 100%;
+
+.Chapters {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	max-width: 90%;
 	margin: 20px auto;
+}
+
+.ChapterTitle {
+	color: white;
+	font-family: "Kanit";
+	font-size: 32px;
+}
+
+.ChapterContainer {
+	width: 50%;
 	text-align: center;
-	height: 400px;
+	height: 300px;
 	overflow-y: auto;
 }
 
@@ -97,8 +111,7 @@
 }
 
 .ChapterContainer::-webkit-scrollbar-thumb {
-	/* background-color: #949494; */
-	background-color: #B799FF;
+	background-color: #31363F;
 	border-radius: 5px;
 }
 
@@ -111,10 +124,10 @@
 	font-size: 16px;
 	border: none;
 	outline: none;
-	font-family: "Lato";
-	background-color: #f8f6e3dc;
+	color: white;
+	background-color: #3d3d3d;
 	cursor: pointer;
-	transition: transform 0.2s linear;
+	transition: background-color 0.2s linear;
 }
 
 .ChapterContainer button p {
@@ -123,7 +136,8 @@
 }
 
 .ChapterContainer button:hover {
-	background-color: #97E7E1;
+	background-color: #1f1f1f;
+	transition: background-color 0.2s linear
 }
 
 .ChapterContainer button:focus {
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 3038b3f..15eb148 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -3,6 +3,7 @@ import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
+import CurrentReading from "./[read]/currentReading";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
@@ -104,8 +105,13 @@ export default async function MangaInfo({ params }) {
 								))}
 						</div>
 					</div>
-
-					<Buttons content={data} />
+					<CurrentReading />
+					<div className={styles.Chapters}>
+						<p className={styles.ChapterTitle}>
+							Chapters & Volumes
+						</p>
+						<Buttons content={data} />
+					</div>
 				</div>
 			)}
 		</div>